<template>
  <!-- 拖拽容器组件的封装 -->
  <div>
    <draggable v-model="picData">
      <!-- 遍历数据 -->
      <div v-for="(item, index) in picData" :key="index" class="up-pic-item"
        :class="{ 'can-drag': picData.length > 1 }">
        <div class="up-pic-item-wrapper">
          <UpLoadBox v-if="showPic" :img-url.sync="item.imageUrl" />
          <div class="info">
            <dl v-if="showName" class="com-form-group">
              <dt class="form-label">标题</dt>
              <dd class="form-container">
                <el-input v-model.lazy="item.text" :placeholder="inputPlaceHolder" />
              </dd>
            </dl>
            <dl class="com-form-group">
              <dt class="form-label">链接</dt>
              <dd class="form-container">
                <ConfigLink :link-obj.sync="item.link" />
              </dd>
            </dl>
          </div>
        </div>
        <div class="up-pic-item-delete el-icon-error" @click="deleteItem(index)" />
      </div>
    </draggable>
    <ButtonAdd v-if="showAdd" @click="addItem" :add-text="addPlaceHolder" />
  </div>
</template>

<script>
import draggable from 'vuedraggable' // 拖拽元素
//上传组件
import UpLoadBox from '@/components/BasicUi/UpLoadBox'
//添加图片按钮的时候的弹窗
import ButtonAdd from '@/components/BasicUi/ButtonAdd'
//添加跳转链接弹窗
import ConfigLink from '@/components/BasicConfig/ConfigLink'


export default {
  name: 'PicList',
  components: {
    draggable, UpLoadBox, ConfigLink, ButtonAdd
  },
  props: {
    // 图片列表数组
    imageList: {
      type: Array, default: null
    },
    // 图片标题文本输入框缺省提示文字
    inputPlaceHolder: {
      type: String, default: ''
    },
    // 添加图片文字
    addPlaceHolder: {
      type: String,
      default: '添加广告图'
    },
    // 是否显示图片选项
    showPic: {
      type: Boolean,
      default: true
    },
    // 是否显示标题选项
    showName: {
      type: Boolean,
      default: true
    },
    // 是否显示添加按钮
    showAdd: {
      type: Boolean,
      default: true
    },
    // 是否显示删除按钮
    showDelete: {
      type: Boolean,
      default: true
    },
    // 列表是否不可拖拽排序
    unGraggable: {
      type: Boolean,
      default: false
    },
    // 最多添加的数据条目数
    limitSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      //图片列表数据 深拷贝
      picData: JSON.parse(JSON.stringify(this.imageList))
    }
  },
  methods: {
    deleteItem(index) {
      this.picData.splice(index, 1)
    },
    addItem() {
      //判断上传的数据带不带图片
      if (this.showPic) {
        //带图片直接调用
        this.showDialogImage()
      } else {
        //不带图片直接添加数据
        this.picData.push({
          link: null,
          imageUrl: '',
          text: ''
        })
      }

    },
    //点击通过vuex修改图片上传的数据来控制弹窗的显示
    showDialogImage() {
      this.$store.commit('SET_UPIMAGE_VISIBLE', true)
      this.$store.commit('SET_UPIMAGE_FUC',this.uploadImgSuccess)
      console.log(this.picData,'aaaaa');
    },
    //定义图片上传成功的函数，内部会传入并且更新数据
    uploadImgSuccess(imgUrl) {
      this.picData.push({
        link: null,
        imageUrl: imgUrl,
        text: ''
      })
    }
  },
  watch:{
    picData:{
      handler:function(newVal){
           this.$emit('update:imageList',newVal)
      },
      deep:true
    }
  }
}
</script>

<style lang="less" scoped>
// 图片列表
.up-pic-item {
  position: relative;
  margin-bottom: 12px;
  padding: 6px 0;
  background: #ffffff;
  box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
  border-radius: 2px;
  user-select: none;

  &.can-drag {
    cursor: move;
  }

  &.sortable-ghost {
    opacity: 0.2;
  }

  &:hover {
    .up-pic-item-delete {
      visibility: visible;
    }
  }

  /deep/.config-link .cllt-name {
    max-width: 110px
  }
}

.up-pic-item-wrapper {
  display: flex;

  .up-pic-box {
    margin: 6px 0 0 12px;
  }

  .info {
    flex: 1;
  }
}

// 图片编辑表单
.com-form-group {
  padding: 6px 12px;
  // display: flex;
  align-items: center;

  .form-label {
    margin-right: 16px;
    font-size: 14px;
    color: #323233;
    line-height: 18px;
    white-space: nowrap;
  }

  .form-container {
    flex: 1;
  }

  /deep/ .input-name .el-input__inner {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    border-radius: 2px;
  }
}
</style>
